<template>
    <!--头部开始-->
    <header>
        <div class="w header-w">
            <!--logo部分-->
            <div class="logo">
                <h1>
                    <a href="/">
                        <img src="@/assets/images/logo.png" alt="">
                    </a>
                </h1>
            </div>

            <!--搜索框-->
            <div id="search" class="" ref="search">
                <div class="search-m">
                    <div class="form">
                        <button class="search-btn">
                            搜索
                        </button>
                        <input type="" name="" class="search-inp" style="color: rgb(153,153,153);"
                               placeholder="炸鸡、汉堡、麻辣烫...">

                    </div>
                </div>
                <!--搜索热词-->
                <div class="search-word">
                    <a href="javascript:void(0);">投资金额：</a>
                    <a href="javascript:void(0);">3-5万</a>
                    <a href="javascript:void(0);">5-10万</a>
                    <a href="javascript:void(0);">15-20万</a>
                    <a href="javascript:void(0);">20-30万</a>
                </div>
            </div>

            <!--三个图标-->
            <div class="join">
                <a href="javascript:void(0);">
                    <img src="@/assets/images/join01.png" alt="">
                    <p>项目库</p>
                </a>
                <a href="javascript:void(0);">
                    <img src="@/assets/images/join02.png" alt="">
                    <p>招商发布</p>
                </a>
                <a href="javascript:void(0);">
                    <img src="@/assets/images/join03.png" alt="">
                    <p>展商入驻</p>
                </a>
            </div>
        </div>
    </header>
</template>

<script>
    export default {
        name: "headr",
        methods:{
            // 固定导航栏
            topBarFixed() {
                // 滚动事件为window，非vue对象，存储this
                let _this = this;
                window.addEventListener("scroll", function () {
                    let webScroll = document.body.scrollTop || document.documentElement.scrollTop;
                    if (webScroll >= 200) {
                        // console.log("ok")
                        _this.$refs.search.classList.add("search-fix");
                    } else {
                        _this.$refs.search.classList.remove("search-fix");
                    }
                })
            },
        },
        mounted() {
            this.topBarFixed()
        }
    }
</script>

<style lang="less">
    header {
        background-color: #fff;

        .header-w {
            border-top: 1px solid transparent;
            //background-color: pink;
            height: 130px;
            position: relative;
            /* logo */

            .logo {
                position: absolute;
                top: 23px;
                left: -36px;
                width: 265px;
                height: 70px;
                z-index: 999;


                h1 {
                    width: 100%;
                    height: 100%;

                    a {
                        display: block;
                        width: 100%;
                        height: 100%;

                        img {
                            display: block;
                            width: 100%;
                        }
                    }
                }
            }

            /* 搜索框 */

            #search {
                width: 100%;
                height: 79px;
                //background-color: cyan;
                position: relative;

                .search-m {
                    height: 100%;
                }

                .form {
                    position: absolute;
                    left: 288px;
                    bottom: 0;
                    width: 542px;
                    height: 45px;

                    .search-btn {
                        width: 69px;
                        height: 45px;
                        background-color: #fe2929;
                        //border: none;
                        border: solid 1px #fe2929;
                        font-size: 18px;
                        color: #fff;
                        font-family: PingFangSC-;
                        cursor: pointer;
                    }

                    .search-inp {
                        font-family: PingFangSC-;
                        width: 473px;
                        height: 45px;
                        position: absolute;
                        right: 0;
                        //border: none;
                        border: 1px solid #ff3434;
                        padding-left: 18px;
                        font-size: 18px;
                        color: #333 !important;

                        /* chrome */

                        &::-webkit-input-placeholder {
                            color: rgb(200, 200, 200);
                            font-size: 14px;
                        }


                        /* Mozilla Firefox 4 to 18 */

                        input:-moz-placeholder {
                            color: #C0C0C0;
                            opacity: 1;
                            font-size: 14px;
                        }

                        /* Mozilla Firefox 19+ */

                        input::-moz-placeholder {
                            color: #C0C0C0;
                            opacity: 1;
                            font-size: 14px;
                        }

                        /* Internet Explorer 10+ */

                        input:-ms-input-placeholder {
                            color: #C0C0C0;
                            font-size: 14px;
                        }


                        &:focus {
                            outline: none;
                            box-shadow: 0 0 2px inset #ff3434;
                        }
                    }
                }

                /* 搜索热词 */

                .search-word {
                    position: absolute;
                    width: 542px;
                    height: 17px;
                    //background-color: cyan;
                    top: 86px;
                    left: 288px;

                    a {
                        font-size: 12px;
                        margin-right: 9px;

                        &:hover {
                            color: #fe2929;
                        }
                    }
                }
            }

            .search-fix {
                width: 100%;
                position: fixed !important;
                height: 60px !important;
                top: 0;
                left: 0;
                z-index: 999;
                background-color: #fff;
                border-bottom: 2px solid #f32222;
                animation: searchTop 0.5s ease-in-out;

                .form {
                    height: 35px;
                    top: 10px;
                    left: 50% !important;
                    transform: translateX(-50%);
                    //border: none;

                    .search-btn {
                        height: 35px !important;
                        border: none !important;
                        //border-radius: 5px;
                        background: linear-gradient(to right, #fd2323, #fd0505); /* 标准的语法 */
                    }

                    .search-inp {
                        height: 35px !important;
                        //border: none !important;
                        //border-right: 2px solid #f32222 !important;
                        //border-left: 2px solid #f32222 !important;
                        //border-radius: 5px;
                    }
                }

                .search-word {
                    display: none;
                }
            }

            @keyframes searchTop {
                0% {
                    top: -50px;
                }

                100% {
                    top: 0;
                }
            }

            /* 三个图标 */

            .join {
                position: absolute;
                right: 0;
                top: 0;
                //background-color: #c7ff77;
                width: 251px;
                height: 40px;
                margin-top: 33px;
                display: flex;
                justify-content: space-between;

                a {
                    flex: 0 0 48px;

                    img {
                        width: 40px;
                        display: block;
                    }

                    p {
                        color: #333;
                        font-size: 12px;
                        text-align: center;
                        line-height: 20px;
                    }
                }
            }
        }
    }
</style>
